<template>
  <div
    style
    class="table-wrapper"
  >
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="data.content"
      :column-title="columTitle"
      :highlight-current-row="highlightCurrentRow"
      element-loading-text=""
      :border="border"
      :stripe="stripe"
      :show-overflow-tooltip="showOverflowTooltip"
      :size="size"
      :empty-text="empty"
      :align="align"
      height="0"
      style="width:100%; font-size:13px;"
      class="table-loading"
      @selection-change="selectionChange"
      @row-click="choseRows"
      @current-change="handleCurrentChange"
      @sort-change="changeTableSort"
    >
      <el-table-column
        v-if="showCheckbox"
        type="selection"
        width="40"
      />
      <el-table-column
        v-if="showIndex"
        type="index"
        width="50"
        align="center"
        label="序号"
      />
      <!-- 实际显示的列数据 -->
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        header-align="center"
        align="center"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :min-width="column.minWidth"
        :fixed="column.fixed"
        :sortable="column.sortable ? column.sortable : false"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <slot
            :column="column"
            :scope="scope"
          />
          <span
            v-if="!column['oper'] && !column.isformatter && !column.status"
          >{{ scope.row[column.prop] }}</span>
          <span v-if="column.isformatter">{{
            scope.row[column.prop] | datanumber2datetime(column.formatter)
          }}</span>
          <span
            v-if="column.status"
            :class="
              column.isActive
                ? scope.row[column.prop] == column.isActive
                  ? 'green'
                  : 'red'
                : ''
            "
          >
            {{
              scope.row[column.prop]
                | statusStr(scope.column.property, column.statusDict)
            }}
          </span>
          <!-- dateFormatter -->
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <div
      v-if="showPagenation"
      class="toolbar"
    >
      <el-pagination
        :current-page="pageRequest.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageRequest.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.totalSize"
        @size-change="sizeChange"
        @current-change="refreshPageRequest"
      />
    </div>
  </div>
</template>
<script>
/* eslint-disable */
export default {
  // inject:['reload'],
  name: "CoreTable",
  components: {
    // KtButton
  },
  props: {
    columTitle: {
      type: String,
      default: ""
    },
    columns: Array, // 表格列配置
    data: Object, // 表格分页数据
    permsEdit: String, // 编辑权限标识
    permsDelete: String, // 删除权限标识
    size: {
      // 尺寸样式
      type: String,
      default: "medium"
    },
    empty: {
      // 无数据样式
      type: String,
      default: " "
    },
    align: {
      // 文本对齐方式
      type: String,
      default: "left"
    },
    maxHeight: {
      // 表格最大高度
      type: [Number, String],
      default: "90%"
    },
    height: {
      // 表格最大高度
      type: [Number, String],
      default: "100%"
    },
    border: {
      // 是否显示边框
      type: Boolean,
      default: true
    },
    stripe: {
      // 是否显示斑马线
      type: Boolean,
      default: true
    },
    highlightCurrentRow: {
      // // 是否高亮当前行
      type: Boolean,
      default: true
    },
    showOverflowTooltip: {
      // 是否单行显示
      type: Boolean,
      default: true
    },
    showCheckbox: {
      // 是否显示操作组件
      type: Boolean,
      default: true
    },
    showIndex: {
      // 是否显示操作组件
      type: Boolean,
      default: true
    },
    loading: {
      // 加载标识
      type: Boolean,
      default: false
    },
    isloadData: {
      type: Boolean,
      default: false
    },
    showPagenation: {
      // 分页显示隐藏
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 分页信息
      pageRequest: {
        data: {},
        pageNum: 1,
        pageSize: 20,
        data: {}
      },
      selections: [] // 列表选中列,
    };
  },
  computed: {},
  watch: {},
  mounted() {
    console.log(
      ">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>《《《《《《《《《《《《《《《《《《",
      this.columns
    );
  },
  methods: {
    sizeChange(pageSize) {
      this.pageRequest.pageSize = pageSize;
      this.findPage();
    },
    choseRows(row, val) {
      console.log(val.property);
      console.log(val);
      // if (this.columTitle !== val.property) {
      this.$refs.multipleTable.toggleRowSelection(row);
      this.$emit("choseRow", row);
      // }
    },
    //选择指定列进行排序
    changeTableSort(column) {
      this.$emit("changeTableSort", column);
    },
    // 分页查询
    findPage() {
      this.$emit("findPage", {
        pageRequest: this.pageRequest
      });
    },
    // 选择切换
    selectionChange: function(selections) {
      this.selections = selections;
      this.$emit("selectionChange", { selections: selections });
    },
    // 选择切换
    handleCurrentChange: function(val) {
      this.$emit("handleCurrentChange", { val: val });
    },
    // 换页刷新
    refreshPageRequest(pageNum) {
      let loading = this.$loading({
        target: ".table-loading",
        lock: true
      });
      this.pageRequest.pageNum = pageNum;
      this.findPage();
      loading.close();
    },
    tableWidthInit() {
      let w = this.$refs.multipleTable.$el.style.width;
      w == "99.99%"
        ? (this.$refs.multipleTable.$el.style.width = "100%")
        : (this.$refs.multipleTable.$el.style.width = "99.99%");
    }
  },
  mounted() {
    this.isloadData ? null : this.refreshPageRequest(1);
  },
  watch: {
    data: {
      handler() {
        let w = this.$refs.multipleTable.$el.style.width;
        w == "99.99%"
          ? (this.$refs.multipleTable.$el.style.width = "100%")
          : (this.$refs.multipleTable.$el.style.width = "99.99%");
      },
      deep: true
      // immediate: true
    }
  }
};
</script>
<style lang="scss" scoped>
.table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}
.toolbar {
  display: flex;
  justify-content: center;
  // margin-bottom: 8px;
}
.oper-links {
  cursor: pointer;
}
.red {
  color: red;
}
.green {
  color: green;
}
</style>
